﻿.knob-control {
    &:after {
        content: '';
        padding-top: 100%;
        display: inline-block;
        width: 0;
    }

    .knob-circle {
        width: 0.84em;
        height: 0.84em;
        margin: 0.06em;
        border-style: solid;
        border-width: 0.05em;
        border-radius: 1em;
        background: black;
    }

    .knob-line {
        position: absolute;
        display: block;
        height: 0.04em;
        width: 1em;
        top: 0.4em;
        left: -0.03em;
        transform-origin: center;
    }

    .knob-hand {
        width: 40%;
        height: 100%;
    }

    .knob-dot {
        position: absolute;
        width: 0.1em;
        height: 0.1em;
        border-radius: 0.1em;
        margin-top: -0.06em;
    }

    .knob-dot.left {left:0;}
    .knob-dot.right {left:0.9em;}

    .scroll-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: transparent;
        overflow-y: scroll;
        -ms-overflow-style: none;
        -ms-scroll-chaining: none;
        -ms-scroll-rails: railed;
        z-index: 10;

        &:after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            margin-top: 300%;
        }
    }
}

ctl-knob {
    display: block;
    font-size: 50px;
    height: 48px;

    &.lg {
        font-size: 80px;
        height: 75px;
    }

    &.md {
        font-size: 50px;
        height: 48px;
    }

    &.sm {
        font-size: 40px;
        height: 39px;
    }

}